<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML>
<html>
<head>
    <title>注册页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="关键词"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.css" rel='stylesheet' type='text/css'/>

    <!-- Custom CSS -->
    <link href="css/style.css" rel='stylesheet' type='text/css'/>

    <!-- font-awesome icons CSS -->
    <link href="css/font-awesome.css" rel="stylesheet">
    <!-- //font-awesome icons CSS -->

    <!-- side nav css file -->
    <link href='css/SidebarNav.min.css' media='all' rel='stylesheet' type='text/css'/>
    <!-- side nav css file -->

    <!-- js-->
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/modernizr.custom.js"></script>


    <!-- Metis Menu -->
    <script src="js/metisMenu.min.js"></script>
    <script src="js/custom.js"></script>
    <link href="css/custom.css" rel="stylesheet">
    <!--//Metis Menu -->

</head>
<body>
<div class="main-content">
    <!-- main content start-->
    <div id="page-wrapper">
        <div class="main-page signup-page">
            <h2 class="title1">注册页面</h2>
            <div class="sign-up-row widget-shadow">
                <h5>请输入注册信息 :</h5>
                <form id="userForm" method="post">
                    <small class="text-danger"> <span id="usernameMsg" style="color: red"></span> </small>
                    <div class="sign-u">
                        <input type="text" name="username" placeholder="账号" required="">
                        <div class="clearfix"></div>
                    </div>
                    <div class="sign-u">
                        <input type="text" name="password" placeholder="密码" required="">
                        <div class="clearfix"></div>
                    </div>
                    <small class="text-danger"> <span id="emailMsg"></span></small>
                    <div class="sign-u" style="position: relative;">
                        <input type="email" name="email" style="width: 550px;" placeholder="邮箱" required="">
                        <div class="clearfix"></div>
                        <button id="codeBtn" class="btn btn-dark btn-block" style="width: 120px;height: 50px;position: absolute;top: 0px;right: 0px;" type="button">获取验证码</button>
                    </div>
                    <small class="text-danger"><span id="codeMsg" style="color: red"></span></small>
                    <div class="sign-u">
                        <input type="text" id="code" placeholder="激活码" required="">
                        <div class="clearfix"></div>
                    </div>
                    <div class="sub_home" align="center">
                        <input type="button" style="width: 120px;height: 40px;background-color: rgb(98, 154, 169);outline: none;border: none" onclick="singup()" value="注册">
                        <div class="clearfix"></div>
                    </div>
                    <div class="registration">
                        已有账号，开始登录
                        <a class="" href="login.jsp">
                            登录
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- side nav js -->
<script src='js/SidebarNav.min.js' type='text/javascript'></script>
<script>
    $('.sidebar-menu').SidebarNav()
    $(function(){
        $("#codeBtn").click(function(){
            let email = $("input[type=email]").val()
            let emailReg = /^\d+@\w+\.[\w]{2,3}/
            var b = emailReg.test(email);
            if(b){
                $("#emailMsg").text("")
                $.get("user/sendMail?email="+email,function(res){
                    if(res){
                        alert("邮件发送成功！")
                    }else{
                        alert("邮件发送失败！")
                    }
                })
            }else{
                $("#emailMsg").text("邮箱格式错误！")
            }
        })
    })
    singup = function(){
        let code = $("#code").val()
        if(!code){
            $("#codeMsg").html("验证码不能为空!")
            return;
        }
        $.ajax({
            url:"user/register?code="+code,
            type:"post",
            data: $("#userForm").serializeArray(),
            dataType:"json",
            cache:false,
            success:function(res){
                if(res){
                    alert("注册成功！")
                    location.href = "./login.jsp"
                }else{
                    $("#usernameMsg").html("注册失败，请验证您所提交的值是否正确！")
                }
            },
            error:function(){
                $("#usernameMsg").html("注册失败，请查看您的数据是否符合规则或联系管理员！")
            }
        })
    }
</script>
<!-- //side nav js -->

<!-- Classie --><!-- for toggle left push menu script -->
<script src="js/classie.js"></script>
<script>
    var menuLeft = document.getElementById('cbp-spmenu-s1'),
        showLeftPush = document.getElementById('showLeftPush'),
        body = document.body;

    showLeftPush.onclick = function () {
        classie.toggle(this, 'active');
        classie.toggle(body, 'cbp-spmenu-push-toright');
        classie.toggle(menuLeft, 'cbp-spmenu-open');
        disableOther('showLeftPush');
    };

    function disableOther(button) {
        if (button !== 'showLeftPush') {
            classie.toggle(showLeftPush, 'disabled');
        }
    }
</script>
<!-- //Classie --><!-- //for toggle left push menu script -->

<!--scrolling js-->
<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script>
<!--//scrolling js-->

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"></script>

</body>
</html>